<template>
	<view class="page visitor">
		<image class="visitor-background" src="/static/images/background.png"></image>

		<view class="visitor-card">
			<view class="visitor-card-title">访客邀请码</view>
			<image :src="codeUrl" mode="" class="visitor-card-qrcode" />
		</view>
		<view class="visitor-footer">
			<view class="visitor-footer-item" @click="handleTo('/pages/qrcode/qrcode')">
				<image src="/static/images/qrcode.png" mode="" />
				<view>一码通</view>
			</view>
			<view class="visitor-footer-item" @click="handleTo('/pages/my/my')">
				<image src="/static/images/user.png" mode="" />
				<view>个人信息</view>
			</view>
		</view>
	</view>
</template>

<script>
	import qrcode from '@/utils/qrcode.js';
	import config from '@/config.js';
	export default {
		data() {
			return {
				company_id: 0,
				inviter: 0,
				codeUrl: ''
			};
		},
		methods: {
			handleTo(url) {
				uni.switchTab({
					url: url
				});
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onShow(query) {
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(() => {
				this.company_id = this.userInfo.company_id;
				if (this.company_id) {
					this.inviter = this.userInfo.id;
					let path = config.QrURL + '/visitor?' +
						`company_id=${this.company_id}&inviter=${this.inviter}`;
					this.codeUrl = qrcode.drawImg(path);
					uni.hideLoading();
				} else {
					uni.showToast({
						title: '未绑定企业',
						duration: 2000
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
				}

			}, 1500);
		},
		//from里面有两个参数，可以用结构赋值解构出来，一个是menu，说明是来自页面的转发，一个是button说明是来自按钮的转发
		//可以用title来设置转发时候的标题，用imageUrl来设置转发时候的图片
		//用page来设置转发时候的页面路径
		onShareAppMessage({
			from
		}) {
			var that = this;
			let url = `/pages/visitor/code?company_id=${that.company_id}&inviter=${that.inviter}`;
			console.log('url', url);
			if (from === 'menu') {
				return {
					title: '访客邀请函',
					path: url,
					imageUrl: '/static/banner2.jpg'
				};
			} else {
				return {
					title: '访客邀请申请表',
					path: url,
					imageUrl: '/static/banner2.jpg'
				};
			}
		}
	};
</script>

<style>
	.visitor-nav {
		background-color: #3b65fc;
	}

	.visitor-background {
		width: 750rpx;
		height: 400rpx;
		/* background: blue; */
	}

	.visitor-content-name {
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #ffffff;
		margin: 71rpx 0 0 0;
	}

	.visitor-content-id {
		font-size: 30rpx;
		font-family: Arial;
		font-weight: 400;
		color: #b8dcfe;
		margin-top: 25rpx;
	}

	.visitor-card {
		width: 669rpx;
		height: 668rpx;
		background: #ffffff;
		border-radius: 20rpx;
		position: absolute;
		top: 222rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.visitor-card-title {
		/* width: 482rpx; */
		height: 38rpx;
		font-size: 48rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #000000;
		margin-top: 90rpx;
	}

	.visitor-card-qrcode {
		width: 475rpx;
		height: 475rpx;
		margin-top: 49rpx;
		margin-bottom: 41rpx;
	}

	.visitor-footer {
		width: 669rpx;
		height: 228rpx;
		background: #ffffff;
		border-radius: 20rpx;
		position: absolute;
		top: 917rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.visitor-footer-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.visitor-footer-item image {
		width: 57rpx;
		height: 57rpx;
		margin-bottom: 26rpx;
	}

	.visitor-footer-item view {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #3e3e3e;
	}
</style>
